<template>
  <div>
    <el-card>
      <h1>损坏上报</h1>
      <el-form ref="damageUpFormRef"
               :model="form"
               :rules="formRules"
               label-width="80px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="姓名"
                          prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :push="2">
            <el-form-item label="学号"
                          prop="studentNum">
              <el-input v-model="form.studentNum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="班级"
                          prop="class">
              <el-input v-model="form.class"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  :push="1">
            <el-form-item label="损坏物品"
                          prop="article">
              <el-input v-model="form.article"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  :push="2">
            <el-form-item label="电话"
                          prop="tel">
              <el-input v-model="form.tel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="描述"
                      prop="desc">
          <el-input type="textarea"
                    placeholder="请输入物品损坏相关信息，比如位置等信息"
                    v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary"
                 @click="damageUp">提交</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'damageUp',
  props: [''],
  data () {
    var checkTel = (rule, value, callback) => {
      // 验证号码的正则表达式
      const telReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(19[0-9]{1})|(17[0-9]{1}))+\d{8})$/
      if (telReg.test(value)) {
        return callback()
      }
      callback(new Error('请输入正确的手机号码'))
    }
    return {
      form: {
        name: '',
        studentNum: '',
        class: '',
        article: '',
        desc: '',
        tel: ''
      },
      formRules: {
        studentNum: [{
          required: true,
          message: '请输入学号',
          trigger: 'blur'
        },
        {
          max: 12,
          min: 12,
          message: '学号必须是12位',
          trigger: 'blur'
        }
        ],
        name: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        tel: [{
          required: false,
          message: '请输入电话',
          trigger: 'blur'
        },
        {
          validator: checkTel,
          trigger: 'blur'
        }
        ],
        article: [{
          required: true,
          message: '请输入损坏物品',
          trigger: 'blur'
        }],
        desc: [{
          required: true,
          message: '请输入损坏物品相关信息',
          trigger: 'blur'
        }]
      }
    }
  },

  methods: {
    damageUp () {
      this.$refs.damageUpFormRef.validate(async valid => {
        if (!valid) return
        const {
          data: res
        } = await this.$axios.get('/damage/damageUp', {
          params: {
            studentNumber: this.form.studentNum,
            name: this.form.name,
            article: this.form.article,
            class: this.form.class,
            tower: window.localStorage.getItem('tower'),
            dorm: window.localStorage.getItem('dorm'),
            desc: this.form.desc,
            tel: this.form.tel
          }
        })
        // console.log(res)
        if (res.code !== 0) {
          return this.message.warning(res.meta.msg)
        } else {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$refs.damageUpFormRef.resetFields()
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>
h1 {
  text-align: center;
  font-size: 1.5em;
}

.el-button {
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
